<template>
	<div class="app-container home">
		<el-row :gutter="20">
			<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-form-item label="学校">
					<el-select v-model="queryParams.schoolId" placeholder="请选择学校" clearable @change="changeSchoolNew">
						<el-option v-for="item in schools" :label="item.schoolname" :key="item.schoolid"
							:value="item.schoolid">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
			<div style="font-size: 20px; font-weight: bold; color: black; margin-bottom: 20px;">今日访问数据</div>
			<el-col :sm="24" :lg="12">
				<div style="font-size: 16px; color: black;margin-bottom: 15px;">访问人数</div>
				<div style="font-size: 18px; font-weight: bold; color: black;">{{userCount}}</div>
			</el-col>
			<el-col :sm="24" :lg="12">
				<div style="font-size: 16px;  color: black;margin-bottom: 15px;">访问次数</div>
				<div style="font-size: 18px; font-weight: bold; color: black;">{{loginCount}}</div>
			</el-col>
			<div style="margin-top: 100px;"></div>
			<el-divider />
			<div style="font-size: 20px; font-weight: bold; color: black; margin-bottom: 20px;">访问统计</div>
			<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
				label-width="68px">
				<el-form-item label="时间粒度">
					<el-select v-model="duration" placeholder="请选择时间段" clearable @change="changeTime">
						<el-option v-for="item in timeList" :label="item.label" :key="item.vlaue" :value="item.vlaue">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="Echarts">
				<div id="main" style="width: 1500px;height: 400px;"></div>
			</div>
		</el-row>
		<el-divider />
		<!-- 		<el-row :gutter="20">
			<el-col :sm="24" :lg="12" style="padding-left: 20px">
				<h2>若依后台管理框架</h2>
				<p>
					一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统。，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
				</p>
				<p>
					<b>当前版本:</b> <span>v{{ version }}</span>
				</p>
				<p>
					<el-tag type="danger">&yen;免费开源</el-tag>
				</p>
				<p>
					<el-button type="primary" size="mini" icon="el-icon-cloudy" plain
						@click="goTarget('https://gitee.com/y_project/RuoYi-Vue')">访问码云</el-button>
					<el-button size="mini" icon="el-icon-s-home" plain @click="goTarget('http://ruoyi.vip')">访问主页
					</el-button>
				</p>
			</el-col>

			<el-col :sm="24" :lg="12" style="padding-left: 50px">
				<el-row>
					<el-col :span="12">
						<h2>技术选型</h2>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="6">
						<h4>后端技术</h4>
						<ul>
							<li>SpringBoot</li>
							<li>Spring Security</li>
							<li>JWT</li>
							<li>MyBatis</li>
							<li>Druid</li>
							<li>Fastjson</li>
							<li>...</li>
						</ul>
					</el-col>
					<el-col :span="6">
						<h4>前端技术</h4>
						<ul>
							<li>Vue</li>
							<li>Vuex</li>
							<li>Element-ui</li>
							<li>Axios</li>
							<li>Sass</li>
							<li>Quill</li>
							<li>...</li>
						</ul>
					</el-col>
				</el-row>
			</el-col>
		</el-row> -->
		<!-- <el-divider /> -->
	</div>
</template>

<script>
	import {
		getUserCount,
		gerUserCountByTimeGroup,
		getAllSchoolUserCount,
		getAllSchoolUserCountByTimeGroup
	} from "@/api/bbs_login_record/bbs_login_record";
	import echarts from 'echarts';
	import {
		listBbs_user,
		getAllSchools,
		getBbs_user,
	} from "@/api/bbs_user/bbs_user";
	import schoolInfoList from '../utils/schoolInfo.js'

	export default {
		name: "Index",
		data() {
			return {
				// 版本号
				version: "3.8.1",
				queryParams: {
					schoolId: 0,
				},
				userCount: 0,
				loginCount: 0,
				schools: [],
				// 显示搜索条件
				showSearch: true,
				currentschools: [],
				myChart: null,
				times: [],
				userCountArray: [],
				loginCountArray: [],
				option: {},
				duration: 1440,
				queryParamsByTime: {
					schoolId: 0,
					intervalMinutes: 0
				},
				timeList: [
					// {
				// 		label: "5分钟",
				// 		vlaue: 5
				// 	},
				// 	{
				// 		label: "15分钟",
				// 		vlaue: 15
				// 	},
				// 	{
				// 		label: "30分钟",
				// 		vlaue: 30
				// 	},
					// {
					// 	label: "1小时",
					// 	vlaue: 60
					// },
					{
						label: "1天",
						vlaue: 1440
					}
				],
				noSchoolId:0,
			};
		},
		created() {},
		mounted() {
			if (!this.$store.state.user.currentSchool.schoolid) {
				this.noSchoolId=1
				console.log(this.noSchoolId)
				return
			}
			setTimeout(this.myEcharts(), 500);
			this.generateTimes(this.duration);
			this.getSchools();
			this.getuserCount();
			this.getuserCountByTime();
		},
		methods: {
			goTarget(href) {
				window.open(href, "_blank");
			},
			myEcharts() {
				// console.log("数据", this.times, this.countArray)
				this.myChart = this.$echarts.init(document.getElementById('main'));
				//配置图表
				// this.option = {
				// 	title: {
				// 		text: '登录人数统计',
				// 	},
				// 	tooltip: {},
				// 	legend: {
				// 		data: ['登录人数']
				// 	},
				// 	xAxis: {
				// 		data: this.times
				// 	},
				// 	yAxis: {},
				// 	series: [{
				// 		name: '登录人数',
				// 		type: 'line', //bar
				// 		data: this.countArray
				// 	}]
				// };
				// this.myChart.setOption(this.option);
			},
			async getuserCount() {
				console.log("学校id", this.$store.state.user.currentSchool.schoolid)
				this.queryParams.schoolId = this.$store.state.user.currentSchool.schoolid
				const response = await getUserCount(this.queryParams);
				console.log(response)
				this.userCount = response.data.userCount
				this.loginCount = response.data.loginCount
			},
			async getuserCountByTime() {
				console.log("学校id", this.$store.state.user.currentSchool.schoolid)
				this.queryParamsByTime.schoolId = this.$store.state.user.currentSchool.schoolid
				this.queryParamsByTime.intervalMinutes = this.duration
				const response = await gerUserCountByTimeGroup(this.queryParamsByTime);
				console.log(response)
				let userCountByTime = response.data.userCount
				for (let i = 0; i < this.times.length; i++) {
					for (let j = 0; j < userCountByTime.length; j++) {
						if (userCountByTime[j].time_group == this.times[i]) {
							this.userCountArray[i] = userCountByTime[j].user_login_count
							// for (var k = 0; k < 50; k++) {
							// 	this.countArray[i+k] = userCountByTime[j].user_login_count
							// }
							// console.log("bingo", userCountByTime[j].user_login_count, this.countArray)
						}
					}

				}
				let loginCountByTime = response.data.loginCount
				for (let i = 0; i < this.times.length; i++) {
					for (let j = 0; j < loginCountByTime.length; j++) {
						if (loginCountByTime[j].time_group == this.times[i]) {
							this.loginCountArray[i] = loginCountByTime[j].login_count
							// for (var k = 0; k < 50; k++) {
							// 	this.countArray[i+k] = userCountByTime[j].user_login_count
							// }
							// console.log("bingo", userCountByTime[j].user_login_count, this.countArray)
						}
					}

				}
				// console.log("noBingo", this.countArray)
				this.myChart = this.$echarts.init(document.getElementById('main'));
				this.option = {
					// title: {
					// 	text: '访问人数统计',
					// },
					tooltip: {},
					legend: {
						data: ['访问人数', '访问次数']
					},
					xAxis: {
						data: this.times,
					},
					yAxis: {},
					series: [{
							name: '访问人数',
							type: 'line', //bar
							data: this.userCountArray
						},
						{
							name: '访问次数',
							type: 'line', //bar
							data: this.loginCountArray
						}
					]
				};
				if (this.duration == 5) {
					this.option.axisPointer = {
						show: true,
						type: 'line',
						label: {
							show: true
						}
					}
				} else {
					this.option.axisPointer = {
						show: false,
					}
				}
				this.myChart.setOption(this.option);
			},
			getSchools() {
				getAllSchools().then((response) => {
					this.schools = response.data;
					this.schools = this.schools.map((x) => {
						x["name"] = x["schoolname"];
						return x;
					});
					//全部学校
					if (response.data.length>1) {
						let schoolObj={
							schoolid:[],
							schoolname:"全部"
						};
						for (let  i = 0; i < response.data.length; i++) {
							schoolObj.schoolid.push(response.data[i].schoolid) 
						}
						schoolObj.schoolid = schoolObj.schoolid.join(',');
						this.schools.unshift(schoolObj);
					}
				});
			},
			changeSchoolNew(value) {
				console.log("改变", value)
				if (typeof value === 'string' && value.includes(',')) {
					this.getASuserCount(value)
					this.generateTimes(this.duration);
					this.getASuserCountByTime(value)
				}
				else{
					this.currentschools = [schoolInfoList.selectOneSchoolInfo(value)]
					this.$store.commit('SET_currentSchool', schoolInfoList.selectOneSchoolInfo(value))
					console.log("当前学校是", this.currentschools, "store", this.$store.state.user.currentSchool)
					this.getuserCount()
					this.generateTimes(this.duration);
					this.getuserCountByTime()
				}
				
			},
			changeTime(value) {
				console.log("时间段改变", value)
				this.generateTimes(this.duration);
				this.getuserCountByTime()
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.getuserCount()
				this.generateTimes(this.duration);
				this.getuserCountByTime()
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.handleQuery();
			},
			generateTimes(minute) {
				const timeArray = [];
				if (minute == 1440) {
					let today = new Date();
					today.setHours(0, 0, 0, 0); // 设置时间为午夜零点
					// 循环七次，每次将日期提前一天并格式化为字符串
					for (let i = 6; i >= 0; i--) {
						let day = new Date(today);
						day.setDate(day.getDate() - i + 1);
						// 格式化日期到 "YYYY-MM-DD" 格式
						let dateString = day.toISOString().split('T')[0];
						timeArray.push(dateString);
					}
				} else {
					const end = new Date(); // 获取当前时间
					const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0); // 设置时间为今天 00:00:00


					let currentTime = new Date(start.getTime()); // 复制开始时间

					while (currentTime <= end) {
						const year = currentTime.getFullYear();
						const month = `${(currentTime.getMonth() + 1 + 100 + "").slice(1)}`;
						const day = `${(currentTime.getDate() + 100 + "").slice(1)}`;
						const hours = `${(currentTime.getHours() + 100 + "").slice(1)}`;
						let minutes = `${Math.floor(currentTime.getMinutes() / minute) * minute + 100 + ""}`.slice(1);
						// console.log('分钟',minutes)
						if (minute === 60) {
							minutes = '00';
						}
						const seconds = '00';
						const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
						timeArray.push(formattedTime);
						currentTime.setMinutes(currentTime.getMinutes() + minute);
					}
				}
				console.log(timeArray)
				this.times = timeArray;
				this.userCountArray = new Array(this.times.length).fill(0);
				this.loginCountArray = new Array(this.times.length).fill(0);
			},
			async getASuserCount(value) {
				// console.log("学校id", this.$store.state.user.currentSchool.schoolid)
				// this.queryParams.schoolId = this.$store.state.user.currentSchool.schoolid
				let queryParams= JSON.parse(JSON.stringify(this.queryParams))
				queryParams.schoolId=null;
				queryParams.schoolIdStr = value
				const response = await getAllSchoolUserCount(queryParams);
				console.log(response)
				this.userCount = response.data.userCount
				this.loginCount = response.data.loginCount
			},
			async getASuserCountByTime(value) {
				// console.log("学校id", this.$store.state.user.currentSchool.schoolid)
				// this.queryParamsByTime.schoolId = this.$store.state.user.currentSchool.schoolid
				this.queryParamsByTime.intervalMinutes = this.duration
				let queryParams= JSON.parse(JSON.stringify(this.queryParamsByTime))
				queryParams.schoolId=null;
				queryParams.schoolIdStr = value
				const response = await getAllSchoolUserCountByTimeGroup(queryParams);
				console.log(response)
				let userCountByTime = response.data.userCount
				for (let i = 0; i < this.times.length; i++) {
					for (let j = 0; j < userCountByTime.length; j++) {
						if (userCountByTime[j].time_group == this.times[i]) {
							this.userCountArray[i] = userCountByTime[j].user_login_count
							// for (var k = 0; k < 50; k++) {
							// 	this.countArray[i+k] = userCountByTime[j].user_login_count
							// }
							// console.log("bingo", userCountByTime[j].user_login_count, this.countArray)
						}
					}
			
				}
				let loginCountByTime = response.data.loginCount
				for (let i = 0; i < this.times.length; i++) {
					for (let j = 0; j < loginCountByTime.length; j++) {
						if (loginCountByTime[j].time_group == this.times[i]) {
							this.loginCountArray[i] = loginCountByTime[j].login_count
							// for (var k = 0; k < 50; k++) {
							// 	this.countArray[i+k] = userCountByTime[j].user_login_count
							// }
							// console.log("bingo", userCountByTime[j].user_login_count, this.countArray)
						}
					}
			
				}
				// console.log("noBingo", this.countArray)
				this.myChart = this.$echarts.init(document.getElementById('main'));
				this.option = {
					// title: {
					// 	text: '访问人数统计',
					// },
					tooltip: {},
					legend: {
						data: ['访问人数', '访问次数']
					},
					xAxis: {
						data: this.times,
					},
					yAxis: {},
					series: [{
							name: '访问人数',
							type: 'line', //bar
							data: this.userCountArray
						},
						{
							name: '访问次数',
							type: 'line', //bar
							data: this.loginCountArray
						}
					]
				};
				if (this.duration == 5) {
					this.option.axisPointer = {
						show: true,
						type: 'line',
						label: {
							show: true
						}
					}
				} else {
					this.option.axisPointer = {
						show: false,
					}
				}
				this.myChart.setOption(this.option);
			},
		},
		watch: {
			'$store.state.user.currentSchool.schoolid': {
				handler(newVal, oldVal) {
					// 当参数变化时触发的处理逻辑
					// console.log('schoolid changed from ' + oldVal + ' to ' + newVal);
					if (newVal) {
						if (this.noSchoolId==1) {
							this.generateTimes(this.duration);
							this.getSchools();
							this.getuserCount();
							// setTimeout(this.myEcharts(), 2000);
							this.getuserCountByTime();
							this.noSchoolId=0
						}
						
					}
					// 进行其他操作，例如重新加载数据等
				},
				deep: true // 监听参数的深度变化
			}
		}
	};
</script>

<style scoped lang="scss">
	.home {
		blockquote {
			padding: 10px 20px;
			margin: 0 0 20px;
			font-size: 17.5px;
			border-left: 5px solid #eee;
		}

		hr {
			margin-top: 20px;
			margin-bottom: 20px;
			border: 0;
			border-top: 1px solid #eee;
		}

		.col-item {
			margin-bottom: 20px;
		}

		ul {
			padding: 0;
			margin: 0;
		}

		font-family: "open sans",
		"Helvetica Neue",
		Helvetica,
		Arial,
		sans-serif;
		font-size: 13px;
		color: #676a6c;
		overflow-x: hidden;

		ul {
			list-style-type: none;
		}

		h4 {
			margin-top: 0px;
		}

		h2 {
			margin-top: 10px;
			font-size: 26px;
			font-weight: 100;
		}

		p {
			margin-top: 10px;

			b {
				font-weight: 700;
			}
		}

		.update-log {
			ol {
				display: block;
				list-style-type: decimal;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0;
				margin-inline-end: 0;
				padding-inline-start: 40px;
			}
		}
	}
</style>